<template>
  <div class="custom-navbar">
    <div class="search">
      <input v-model="inputvalue" placeholder="请输入城市、景点等关键字" class="input" />
      <uni-icons class="input-icon" type="search" size="20"></uni-icons>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomNavbar',
  props: {
    activeNav: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputvalue: ''
    };
  },
  methods: {
  
  }
};
</script>

<style scoped lang="scss">
.custom-navbar {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: rgb(238, 247, 253);

  .search {
    margin-top: 5.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.5rem;

    .input {
      border: 1.5px solid rgb(250, 248, 248);
      width: 75%;
      border-radius: 2rem;
      box-shadow: inset 2px 2px 4px rgba(48, 48, 48, 0.1),
        inset -2px -2px 4px rgba(48, 48, 48, 0.1);
      outline: none;
      background: transparent;
      color: #333;
      padding: 0.4rem;
      height: 1.3rem;
    }

    .input-icon {
      width: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(246, 243, 243, 0.543);
      height: 2rem;
      border-radius: 50%;
      box-shadow: 3px 5px 5px 0.5px rgba(5, 5, 5, 0.1);
    }
  }
}
</style>
